<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>PATTRNS playground</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Fira+Mono:wght@400;700&display=swap">
    <link rel="stylesheet" href="./app.css">
</head>

<body>
    <div id="loading-splash" class="loading-splash">
        <div id="spinner" class="spinner"></div>
        <div id="spinner-status">Loading...</div>
    </div>

    <div id="app-content" class="app-content">
        <div class="header">
            <div>
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96 30" height="36px" width="100%"
                    style="margin-bottom: -4px;">
                    <path
                        d="M 6.426 12.918 Q 5.975 12.918 5.537 12.904 Q 5.1 12.891 4.717 12.85 L 4.717 20 L 1.367 20 L 1.367 1.707 L 6.645 1.707 Q 7.971 1.707 8.962 1.823 Q 9.953 1.939 10.732 2.172 Q 12.605 2.746 13.617 4.004 Q 14.629 5.262 14.629 7.203 Q 14.629 8.529 14.082 9.589 Q 13.535 10.648 12.482 11.387 Q 11.43 12.125 9.912 12.521 Q 8.395 12.918 6.426 12.918 Z M 4.717 10.033 Q 5.004 10.074 5.448 10.095 Q 5.893 10.115 6.371 10.115 Q 7.725 10.115 8.641 9.896 Q 9.557 9.678 10.117 9.288 Q 10.678 8.898 10.924 8.345 Q 11.17 7.791 11.17 7.135 Q 11.17 6.328 10.801 5.74 Q 10.432 5.152 9.516 4.824 Q 9.037 4.66 8.333 4.585 Q 7.629 4.51 6.604 4.51 L 4.717 4.51 Z"
                        style="fill: rgb(200, 200, 200); text-wrap-mode: nowrap;"></path>
                    <path
                        d="M 23.331 15.338 L 16.44 15.338 L 14.649 20 L 11.081 20 L 18.341 1.707 L 21.403 1.707 L 28.663 20 L 25.122 20 Z M 19.858 6.109 Q 18.901 8.98 18.149 10.908 L 17.52 12.535 L 22.251 12.535 L 21.622 10.908 Q 20.87 8.967 19.913 6.109 Z"
                        style="fill: rgb(200, 200, 200); text-wrap-mode: nowrap;"></path>
                    <path
                        d="M 32.551 20 L 29.201 20 L 29.201 4.51 L 23.295 4.51 L 23.295 1.707 L 38.443 1.707 L 38.443 4.51 L 32.551 4.51 Z"
                        style="fill: rgb(200, 200, 200); text-wrap-mode: nowrap;"></path>
                    <path
                        d="M 44.692 20 L 41.342 20 L 41.342 4.51 L 35.436 4.51 L 35.436 1.707 L 50.584 1.707 L 50.584 4.51 L 44.692 4.51 Z"
                        style="fill: rgb(200, 200, 200); text-wrap-mode: nowrap;"></path>
                    <path
                        d="M 63.51 7.203 Q 63.51 9.117 62.45 10.45 Q 61.39 11.783 59.176 12.426 L 59.176 12.48 L 64.617 20 L 60.598 20 L 55.621 12.918 L 53.324 12.918 L 53.324 20 L 49.974 20 L 49.974 1.707 L 55.539 1.707 Q 56.92 1.707 58.109 1.864 Q 59.299 2.021 60.146 2.336 Q 61.76 2.951 62.635 4.161 Q 63.51 5.371 63.51 7.203 Z M 54.978 10.115 Q 56.127 10.115 56.927 10.013 Q 57.726 9.91 58.273 9.705 Q 59.285 9.322 59.675 8.659 Q 60.064 7.996 60.064 7.135 Q 60.064 6.396 59.757 5.829 Q 59.449 5.262 58.711 4.934 Q 58.232 4.715 57.508 4.612 Q 56.783 4.51 55.717 4.51 L 53.324 4.51 L 53.324 10.115 Z"
                        style="fill: rgb(169, 64, 28); text-wrap-mode: nowrap;"></path>
                    <path
                        d="M 73.963 10.211 Q 75.932 13.014 77.162 15.188 L 77.244 15.188 Q 77.08 11.619 77.08 9.992 L 77.08 1.707 L 80.43 1.707 L 80.43 20 L 76.916 20 L 70.955 11.578 Q 69.383 9.391 67.701 6.506 L 67.619 6.506 Q 67.783 9.869 67.783 11.715 L 67.783 20 L 64.434 20 L 64.434 1.707 L 67.947 1.707 Z"
                        style="fill: rgb(169, 64, 28); text-wrap-mode: nowrap;"></path>
                    <path
                        d="M 90.103 14.75 Q 90.103 14.053 89.762 13.622 Q 89.42 13.191 88.832 12.918 Q 88.244 12.645 87.513 12.474 Q 86.781 12.303 85.974 12.139 Q 84.908 11.906 83.937 11.585 Q 82.967 11.264 82.228 10.696 Q 81.49 10.129 81.053 9.254 Q 80.615 8.379 80.615 7.066 Q 80.615 5.617 81.121 4.544 Q 81.627 3.471 82.495 2.767 Q 83.363 2.063 84.532 1.714 Q 85.701 1.365 87.164 1.365 Q 88.627 1.365 90.103 1.652 Q 91.58 1.939 92.646 2.391 L 92.646 5.262 Q 91.224 4.701 89.919 4.448 Q 88.613 4.195 87.465 4.195 Q 85.81 4.195 84.915 4.797 Q 84.019 5.398 84.019 6.602 Q 84.019 7.299 84.313 7.75 Q 84.607 8.201 85.113 8.495 Q 85.619 8.789 86.275 8.967 Q 86.931 9.145 87.67 9.295 Q 88.832 9.541 89.891 9.862 Q 90.951 10.184 91.771 10.758 Q 92.592 11.332 93.07 12.255 Q 93.549 13.178 93.549 14.613 Q 93.549 16.09 93.002 17.17 Q 92.455 18.25 91.45 18.954 Q 90.445 19.658 89.01 20 Q 87.574 20.342 85.865 20.342 Q 84.375 20.342 82.932 20.048 Q 81.49 19.754 80.533 19.221 L 80.533 16.391 Q 81.887 16.979 83.172 17.245 Q 84.457 17.512 85.824 17.512 Q 86.617 17.512 87.383 17.382 Q 88.148 17.252 88.757 16.938 Q 89.365 16.623 89.734 16.083 Q 90.103 15.543 90.103 14.75 Z"
                        style="fill: rgb(169, 64, 28); text-wrap-mode: nowrap;"></path>
                    <path
                        d="M 2.008 28.168 L 1.371 28.168 L 1.371 22.941 L 2.82 22.941 Q 3.145 22.941 3.42 22.98 Q 3.695 23.02 3.926 23.102 Q 4.395 23.27 4.637 23.604 Q 4.879 23.938 4.879 24.426 Q 4.879 24.824 4.721 25.127 Q 4.562 25.43 4.262 25.633 Q 3.961 25.836 3.529 25.939 Q 3.098 26.043 2.551 26.043 Q 2.289 26.043 2.008 26.02 Z M 2.008 25.438 Q 2.137 25.453 2.277 25.461 Q 2.418 25.469 2.543 25.469 Q 2.992 25.469 3.309 25.398 Q 3.625 25.328 3.824 25.193 Q 4.023 25.059 4.113 24.865 Q 4.203 24.672 4.203 24.426 Q 4.203 24.121 4.057 23.926 Q 3.91 23.73 3.641 23.629 Q 3.473 23.566 3.254 23.541 Q 3.035 23.516 2.746 23.516 L 2.008 23.516 Z M 6.57 22.941 L 6.57 27.594 L 9.121 27.594 L 9.121 28.168 L 5.933 28.168 L 5.933 22.941 Z M 9.57 28.168 L 11.699 22.941 L 12.25 22.941 L 14.379 28.168 L 13.687 28.168 L 13.062 26.594 L 10.879 26.594 L 10.254 28.168 Z M 11.968 23.754 Q 11.621 24.73 11.301 25.527 L 11.105 26.02 L 12.836 26.02 L 12.64 25.527 Q 12.32 24.715 11.984 23.754 Z M 16.741 26.066 L 16.741 28.168 L 16.105 28.168 L 16.105 26.066 L 14.202 22.941 L 14.898 22.941 L 16.413 25.48 L 16.433 25.48 L 17.948 22.941 L 18.644 22.941 Z M 22.726 26.055 L 21.535 26.055 L 21.535 25.48 L 23.363 25.48 L 23.363 28.008 Q 23.281 28.051 23.123 28.096 Q 22.964 28.141 22.761 28.18 Q 22.558 28.219 22.326 28.242 Q 22.093 28.266 21.867 28.266 Q 21.195 28.266 20.681 28.082 Q 20.167 27.898 19.82 27.563 Q 19.472 27.227 19.292 26.746 Q 19.113 26.266 19.113 25.676 Q 19.113 25.035 19.322 24.512 Q 19.531 23.988 19.912 23.617 Q 20.292 23.246 20.822 23.045 Q 21.351 22.844 21.988 22.844 Q 22.16 22.844 22.332 22.857 Q 22.503 22.871 22.66 22.897 Q 22.816 22.922 22.949 22.957 Q 23.082 22.992 23.171 23.031 L 23.171 23.594 Q 22.937 23.516 22.632 23.463 Q 22.328 23.41 22.023 23.41 Q 21.578 23.41 21.173 23.545 Q 20.769 23.68 20.46 23.953 Q 20.152 24.227 19.968 24.639 Q 19.785 25.051 19.785 25.605 Q 19.785 26.148 19.935 26.543 Q 20.085 26.938 20.361 27.195 Q 20.636 27.453 21.029 27.576 Q 21.421 27.699 21.902 27.699 Q 22.124 27.699 22.341 27.676 Q 22.558 27.652 22.726 27.609 Z M 25.288 26.004 L 25.288 28.168 L 24.651 28.168 L 24.651 22.941 L 26.007 22.941 Q 26.351 22.941 26.591 22.967 Q 26.831 22.992 27.03 23.047 Q 27.577 23.195 27.866 23.553 Q 28.155 23.91 28.155 24.445 Q 28.155 24.762 28.054 25.012 Q 27.952 25.262 27.769 25.445 Q 27.585 25.629 27.329 25.746 Q 27.073 25.863 26.761 25.918 L 26.761 25.934 L 28.468 28.168 L 27.667 28.168 L 26.058 26.004 Z M 25.288 23.516 L 25.288 25.43 L 25.917 25.43 Q 26.21 25.43 26.417 25.41 Q 26.624 25.391 26.788 25.34 Q 27.12 25.238 27.3 25.016 Q 27.48 24.793 27.48 24.434 Q 27.476 24.098 27.308 23.893 Q 27.14 23.688 26.843 23.598 Q 26.702 23.555 26.507 23.535 Q 26.312 23.516 26.011 23.516 Z M 33.425 25.559 Q 33.425 25.031 33.288 24.629 Q 33.152 24.227 32.912 23.957 Q 32.671 23.688 32.345 23.549 Q 32.019 23.41 31.644 23.41 Q 31.269 23.41 30.943 23.549 Q 30.617 23.688 30.376 23.957 Q 30.136 24.227 29.999 24.629 Q 29.863 25.031 29.863 25.559 Q 29.863 26.086 30.001 26.486 Q 30.14 26.887 30.38 27.156 Q 30.621 27.426 30.947 27.563 Q 31.273 27.699 31.652 27.699 Q 32.027 27.699 32.349 27.563 Q 32.671 27.426 32.912 27.156 Q 33.152 26.887 33.288 26.486 Q 33.425 26.086 33.425 25.559 Z M 34.097 25.559 Q 34.097 26.152 33.925 26.648 Q 33.753 27.145 33.433 27.504 Q 33.113 27.863 32.662 28.064 Q 32.21 28.266 31.652 28.266 Q 31.074 28.266 30.617 28.064 Q 30.16 27.863 29.843 27.504 Q 29.527 27.145 29.359 26.648 Q 29.191 26.152 29.191 25.559 Q 29.191 24.961 29.365 24.463 Q 29.538 23.965 29.857 23.605 Q 30.175 23.246 30.628 23.045 Q 31.081 22.844 31.644 22.844 Q 32.218 22.844 32.673 23.045 Q 33.128 23.246 33.445 23.605 Q 33.761 23.965 33.929 24.463 Q 34.097 24.961 34.097 25.559 Z M 37.249 27.699 Q 37.535 27.699 37.755 27.633 Q 37.976 27.566 38.14 27.445 Q 38.304 27.324 38.413 27.154 Q 38.523 26.984 38.581 26.777 Q 38.62 26.648 38.636 26.49 Q 38.652 26.332 38.652 26.184 L 38.652 22.941 L 39.288 22.941 L 39.288 26.168 Q 39.288 26.352 39.269 26.551 Q 39.249 26.75 39.206 26.922 Q 39.132 27.211 38.984 27.457 Q 38.835 27.703 38.597 27.883 Q 38.359 28.063 38.025 28.164 Q 37.691 28.266 37.242 28.266 Q 36.812 28.266 36.488 28.172 Q 36.163 28.078 35.931 27.912 Q 35.699 27.746 35.55 27.518 Q 35.402 27.289 35.32 27.02 Q 35.261 26.824 35.236 26.602 Q 35.21 26.379 35.21 26.168 L 35.21 22.941 L 35.847 22.941 L 35.847 26.184 Q 35.847 26.359 35.872 26.545 Q 35.898 26.73 35.952 26.883 Q 36.089 27.262 36.408 27.48 Q 36.726 27.699 37.249 27.699 Z M 43.28 25.855 Q 43.761 26.547 44.229 27.277 L 44.253 27.277 Q 44.202 26.516 44.202 25.723 L 44.202 22.941 L 44.839 22.941 L 44.839 28.168 L 44.206 28.168 L 42.155 25.254 Q 41.624 24.492 41.206 23.832 L 41.183 23.832 Q 41.233 24.547 41.233 25.5 L 41.233 28.168 L 40.597 28.168 L 40.597 22.941 L 41.229 22.941 Z M 50.402 25.531 Q 50.402 25.988 50.288 26.391 Q 50.175 26.793 49.947 27.115 Q 49.718 27.438 49.376 27.672 Q 49.034 27.906 48.577 28.035 Q 48.316 28.109 48.011 28.139 Q 47.706 28.168 47.351 28.168 L 46.167 28.168 L 46.167 22.941 L 47.363 22.941 Q 47.718 22.941 48.023 22.971 Q 48.327 23 48.589 23.074 Q 49.046 23.203 49.388 23.434 Q 49.73 23.664 49.954 23.979 Q 50.179 24.293 50.29 24.686 Q 50.402 25.078 50.402 25.531 Z M 49.73 25.531 Q 49.73 24.777 49.402 24.309 Q 49.073 23.84 48.46 23.645 Q 48.226 23.57 47.937 23.543 Q 47.648 23.516 47.284 23.516 L 46.804 23.516 L 46.804 27.594 L 47.284 27.594 Q 47.648 27.594 47.937 27.566 Q 48.226 27.539 48.46 27.465 Q 49.073 27.27 49.402 26.781 Q 49.73 26.293 49.73 25.531 Z"
                        style="fill: rgb(200, 200, 200); text-transform: uppercase; text-wrap-mode: nowrap;"></path>
                </svg>
            </div>
            <div class="header-right">
                <a href="https://renoise.github.io/pattrns/" class="tutorial-link">Read the Tutorials</a>
            </div>
        </div>

        <div class="transport">
            <button id="playButton" class="toggleButton"><i class="fas fa-play"></i></button>
            <button id="midiButton" class="toggleButton" title="Play scripts polyphonically with MIDI Input">
                <svg width="40" height="14" viewBox="10 0 62 20" xmlns="http://www.w3.org/2000/svg">
                    <path
                        d="M10 0h8v20h-8zm9 0h8v20h-8zm9 0h8v20h-8zm9 0h8v20h-8zm9 0h8v20h-8zm9 0h8v20h-8zm9 0h8v20h-8z"
                        id="whiteKeys" fill="currentColor" stroke="black" stroke-width="0.5" />
                    <path id="blackKeys" d="M15 0h6v12h-6zm9 0h6v12h-6zm18 0h6v12h-6zm9 0h6v12h-6zm9 0h6v12h-6z" fill="black" />
                </svg>
            </button>

            <div class="bpm-control">
                <span>BPM:</span>
                <input type="number" id="bpmInput" value="120" min="60" max="300">
            </div>

            <div class="volume-control">
                <span>Volume:</span>
                <input type="range" id="volumeSlider" min="0" max="142" value="71">
                <input type="text" id="volumeInput">
            </div>

            <div class="sample-control">
                <span>Samples:</span>
                <select id="sampleSelect">
                    <option value="none">Loading Samples...</option>
                </select>
                <button id="loadSampleButton" class="text-button" title="Load a local audio file (.wav, .flac, .mp3)"><i
                        class="fas fa-upload"></i></button>
                <button id="clearSamplesButton" class="text-button" title="Remove all loaded samples"><i
                        class="fas fa-trash"></i></button>
                <input type="file" id="sampleFileInput" style="display: none;" accept=".wav,.flac,.mp3">
            </div>
        </div>

        <div id="parameters-container" class="parameters-container"></div>

        <div class="main-container">
            <div class="editor-column">
                <div class="editor-status">
                    <div id="editor-status-content" class="editor-status-content hidden">
                        <span>Hit <code>Control + Enter</code> to apply changes</span>
                        <span id="editCount">no edits</span>
                    </div>
                </div>
                <div id="editor" class="editor"></div>
                <div id="editor-error" class="editor-error">
                    <div id="editor-error-content" class="editor-error-content"></div>
                </div>
            </div>
            <div class="examples-column">
                <ul id="examples-list" class="examples-list"></ul>
            </div>
        </div>
        <div id="status" class="status">Loading...</div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.40.0/min/vs/loader.min.js"></script>
    <script src="app.js" type="module"></script>

</body>

</html>
